<ion-header>

  <ion-toolbar>
    <ion-title>Grid Alignment</ion-title>
  </ion-toolbar>

</ion-header>


<ion-content class="alignment-demo">
  <ion-row>
    <ion-col>
      ion-col
    </ion-col>
    <ion-col text-right>
      ion-col[text-right]
    </ion-col>
  </ion-row>

  <ion-row text-center>
    <ion-col>
      ion-row[text-center]
    </ion-col>
    <ion-col>
      ion-row[text-center]
    </ion-col>
    <ion-col>
      ion-row[text-center]
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col text-left>
      ion-col[text-left]
    </ion-col>
    <ion-col text-left>
      ion-col[text-left]
    </ion-col>
    <ion-col text-right>
      ion-col[text-right]
    </ion-col>
    <ion-col text-right>
      ion-col[text-right]
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col>
      <button ion-button small>Button 1</button>
    </ion-col>
    <ion-col width-50 text-center>
      <button ion-button small>Button 2</button>
      <button ion-button small>Button 3</button>
    </ion-col>
    <ion-col text-right>
      <button ion-button small>Button 4</button>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col>
      <button ion-button small>Button 1</button>
      <button ion-button small>Button 2</button>
    </ion-col>
    <ion-col text-right>
      <button ion-button small>Button 3</button>
      <button ion-button small>Button 4</button>
    </ion-col>
  </ion-row>

</ion-content>

<style>
  .alignment-demo ion-row {
    border: 1px solid #ddd;
    margin: 10px 0;
  }
</style>
